{% extends 'base.html' %}

{% block title %}文本分词{% endblock %}

{% block content %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>词频统计</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }

        h1 {
            text-align: left; /* 标题居中对齐 */
            color: black;
            margin-top: 40px;
        }

        textarea {
            width: 98%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            resize: none; /* 禁用手动调整大小 */
        }

        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
            margin-top: 20px; /* 上边距 */
        }

        .styled-button {
            background-color: #007bff; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }

        h2 {
            margin-top: 20px; /* 上边距 */
            color: #35424a; /* 子标题颜色 */
        }

        h3 {
            color: #191970;
            font-size: 18px;
            line-height: 1.6;
            margin: 20px 0;
            padding: 0;
        }

        table {
            width: 100%; /* 表格宽度100% */
            border-collapse: collapse; /* 合并边框 */
            margin-top: 20px; /* 上边距 */
        }

        th, td {
            border: 1px solid #ddd; /* 单元格边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: left; /* 左对齐 */
        }

        tr:nth-child(even) {
            background-color: #f9f9f9; /* 隔行换色 */
        }

        tr:hover {
            background-color: #f1f1f1; /* 悬停高亮行 */
        }
    </style>
</head>
<body>
    <h1>词频分析报告</h1>
    <p>请输入一段中文文本：</p>
    <form method="post">
        {% csrf_token %}
        <textarea name="text" rows="10" cols="50" placeholder="输入文本..."></textarea><br>
        <div class="button-container">
            <button type="submit" class="styled-button">分词</button>
        </div>
    </form>
    <hr>
    <h3>在文本框中，用户可以输入希望进行文本识别的中文文本。</h3>
    <h3>点击“分词”按钮后，系统会自动分析文本，并展示分析报告，</h3>
    <h3>报告包含提取出每个词语及其对应的词性，同时生成词云图和词频统计，便于对文本内容进行深入分析。</h3>

    {% if original_text %}
        <h2>原始文本</h2>
        <p>{{ original_text }}</p>

        <h2>分词结果</h2>
        <p>{{ segmented_text }}</p>

        <h2>词性标注</h2>
        <p>{% autoescape off %}{{ part_of_speech|safe }}{% endautoescape %}</p>

        {% if wordcloud_filename %}
        <h2>词云</h2>
        <img src="{{ wordcloud_filename }}" alt="词云"/>
        {% endif %}

        <h2>文本分析报告</h2>
        <table>
            <tr>
                <th>词语</th>
                <th>频率</th>
            </tr>
            {% for word, freq in frequency_data %}
            <tr>
                <td>{{ word }}</td>
                <td>{{ freq }}</td>
            </tr>
            {% endfor %}
        </table>
    {% endif %}
</body>
</html>
{% endblock %}
